<template>
  <div class="wrapper">
    <!-- <div class="finished">
      <magnifier
        :link="link"
        :blank="blank"
        :imgUrl="imgUrl"
        :imgWidth="imgWidth"
        :imgHeight="imgWidth"
        :magWidth="magWidth"
        :magHeight="magHeight"
        :imgAlt="imgAlt"
        @click="cli"
      ></magnifier>
      <stars :num="num" :getStarNum="getStarNum" :size="size"></stars>
    </div>  -->
    <modal
      :width="width"
      :show="show"
      :borderRadius="borderRadius"
      :headColor="headColor"
      :headText="headText"
      :contentText="contentText"
      :position="position"
      :btnGroupShow="btnGroupShow"
      :confirmText="confirmText"
      :cancelText="cancelText"
      @confirm="modalConfirm"
      @close="modalClose"
    >
    </modal>
    <button @click="onShow">点击</button>

    <!-- <div class="doing">
      <carousel
        :autoplay="true"
        :duration="3000"
        :hasDot="true"
        :hasDrictor="true"
        style="width: 300px; height: 200px"
        dotBgColor="blue"
      >
        <div>
          <car-item
            v-for="(item, index) in picList"
            :imgPath="item"
            :key="index"
          ></car-item>
        </div>
      </carousel>
    </div> -->
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  name: "App",
  setup() {
    // //五星好评
    // const state = reactive({
    //   imgUrl:
    //     "https://ae01.alicdn.com/kf/Uf323c2d0b4f14007b869c576f5064c112.jpg",
    //   link: "#",
    //   blank: true,
    //   imgWidth: 460,
    //   imgHeight: 460,
    //   magWidth: 150,
    //   magHeight: 150,
    //   imgAlt: "图片",
    // });
    // const StarState = reactive({
    //   num: 3,
    //   size: 20,
    // });
    // const getStarNum = (num) => {
    //   console.log(num);
    // };

    // const starsClick = (index, item) => {
    //   console.log(index, item);
    // };
    // const cli = (e) => {
    //   console.log(e.pageX, e.pageY);
    // };

    //模态框
    const modal = reactive({
      width: "350",
      show: false,
      borderRadius: "10",
      headColor: "#cbd2f0",
      headText: "this is title",
      contentText: "this is text",
      position: "center",
      btnGroupShow: true,
      confirmText: "是",
      cancelText: "关闭",
    });
    const modalClose = () => {
      modal.show = false;
      console.log("modalClose");
    };
    const modalConfirm = () => {
      modal.show = false;
      console.log("modalConfirm");
    };
    const onShow = () => {
      modal.show = true;
    };

    //轮播图
    const picList = [
      "https://gitee.com/ray254258/picture-store/raw/master/carousel.jpg",
      "https://gitee.com/ray254258/picture-store/raw/master/carousel1.jpg",
      "https://gitee.com/ray254258/picture-store/raw/master/carousel2.jpg",
    ];
    return {
      // cli,
      // ...toRefs(state),
      //五星好评
      // starsClick,
      // getStarNum,
      // ...toRefs(StarState),
      //模态框
      modalClose,
      modalConfirm,
      onShow,
      ...toRefs(modal),
      //轮播图
      // picList,
    };
  },
};
</script>

<style lang="scss">
body {
  background-color: #333;
}
</style>
